import { computed, defineComponent, reactive, toRefs } from "@vue/runtime-core";
import { Layout, Menu } from "ant-design-vue";
import {
  CodeOutlined,
  CarryOutOutlined,
  SelectOutlined,
} from "@ant-design/icons-vue";
import { RouterView, useRouter } from "vue-router";

export default defineComponent({
  name: "baseLayout",
  setup() {
    const router = useRouter();

    const handleClick = (opt: { item: string; key: string }) => {
      if (opt.key === "swagger") {
        window.open("/swagger/index.html", "_blank");
      } else {
        router.push({ name: opt.key });
      }
    };

    const state = reactive({
      selectedKeys: new Array<string>(),
    });

    const selectedKeys = computed(() => {
      let arr = new Array<string>();
      if (router.currentRoute.value.name) {
        arr = [router.currentRoute.value.name.toString()];
      }
      return arr;
    });

    return {
      ...toRefs(state),
      selectedKeys,
      handleClick,
    };
  },
  render() {
    return (
      <>
        <Layout>
          <Layout.Sider style={{ minHeight: "100vh" }} collapsible={true}>
            <div class="logo"></div>
            <Menu
              theme="dark"
              onClick={this.handleClick}
              selectedKeys={this.selectedKeys}
            >
              <Menu.Item key="services" title="基层服务">
                <span>
                  <CodeOutlined />
                  <span>基层服务</span>
                </span>
              </Menu.Item>
              <Menu.Item key="tasks" title="任务清单">
                <span>
                  <CarryOutOutlined />
                  <span>任务</span>
                </span>
              </Menu.Item>
              <Menu.Item key="swagger" title="Swagger文档-跳出">
                <span>
                  <SelectOutlined />
                  <span>接口文档</span>
                </span>
              </Menu.Item>
            </Menu>
          </Layout.Sider>
          <Layout>
            <Layout.Content>
              <div style={{ padding: "24px" }}>
                <RouterView />
              </div>
            </Layout.Content>
          </Layout>
        </Layout>
      </>
    );
  },
});
